<template>
<div class="fin_param">
  <div class="tool">
    <ToolBar
        :show-all="false"
        :add-data="setDialogVisible"
        :update-data="updateDialogVisible"
        :delete-data="deleteById"
        :delete-disable="multipleSelection.length<=0"
        :update-disable="multipleSelection.length!==1"
        :show-multiple="false"
    ></ToolBar>
  </div>
  <el-table
      :data="tableData"
      stripe
      height="620"
      border
      @selection-change="handleSelectionChange"
      default-expand-all
      :header-cell-style="{'text-align':'center'}"
      :cell-style="{'text-align':'center'}">
    <el-table-column type="selection" width="50" label="序号">
    </el-table-column>
    <el-table-column label="参数名称" prop="paramName">
    </el-table-column>
    <el-table-column label="参数编码" prop="paramCode">
    </el-table-column>
    <el-table-column label="参数值" prop="paramValue">
    </el-table-column>
    <el-table-column label="参数备注" prop="summary">
    </el-table-column>

    <el-table-column label="创建时间" min-width="100">
      <template slot-scope="scope">
        {{ scope.row.createTime|formatDate }}
      </template>
    </el-table-column>
    <el-table-column label="操作" min-width="120">
      <template slot-scope="scope">
        <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑
        </el-button>
        <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="block">
    <el-pagination
        hide-on-single-page
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size=size
        layout="total, sizes, prev, pager, next, jumper"
        :total=total>
    </el-pagination>
  </div>
  <el-dialog :title="'财务参数'+(isAdd?'添加':'修改')" :visible.sync="dialogFormVisible" :before-close="handleClose" size="35%">
    <el-form :model="form" label-position="left" :rules="rules" ref="form">
      <el-form-item label="参数名称" :label-width="formLabelWidth" prop="paramName">
        <el-input v-model="form.paramName" autocomplete="off"  :disabled="!isAdd"></el-input>
      </el-form-item>
      <el-form-item label="参数编码" :label-width="formLabelWidth" prop="paramCode">
        <el-input v-model="form.paramCode" autocomplete="off" :disabled="!isAdd"></el-input>
      </el-form-item>
      <el-form-item label="参数值" :label-width="formLabelWidth" prop="paramValue">
        <el-input v-model="form.paramValue" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="参数备注" :label-width="formLabelWidth" prop="summary">
        <el-input v-model="form.summary" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="isAdd?addData('form'):updateById('form')">确 定 <span v-text="isAdd?'添 加':'修 改'"></span></el-button>

    </div>
  </el-dialog>

</div>
</template>

<script>
import ToolBar from "@/components/common/ToolBar";
export default {
  components:{ToolBar},
  name: "FinParam",
  data(){
    return{
      title:"",
      currentPage: 1,
      total: 0,
      size: 10,
      tableData: [],
      multipleSelection:[],
      form:{
        paramName:null,
        paramCode:null,
        paramValue:null,
        summary:null,
      },
      dialogFormVisible:false,
      formLabelWidth:"85px",
      rules: {
        paramName: [{
          required:true,message:"请输入参数名称...",trigger:"blur"
        }],
        paramCode: [{
          required:true,message:"请输入参数编码...",trigger:"blur"
        }],
        paramValue: [{
          required:true,message:"请输入参数值...",trigger:"blur"
        }],
      },
      isAdd:true
    }
  },
  created() {
    this.getDataList()
  },
  methods:{
    handleClose(done) {
      console.log("Donw:",done)
      this.$confirm('确认关闭？')
          .then(_ => {
            this.form={}
            this.dialogFormVisible=false
            done();
          })
          .catch(_ => {});
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleEdit(index,row) {
      console.log("参数：",row);
      this.form=row
      this.setDialogVisible(false)
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.$tools.showMessageBox("确认删除"+row.paramName+"("+row.paramValue+")？","操作确认",'warning').then(confirm=>{
        axios.delete("/fin_param/delete/"+row.id).then(res=>{
          if(res.data.success){
            this.$tools.showMessage("参数"+row.paramName+"("+row.paramValue+")删除成功！","success")
            this.getDataList()
          }
        })

      }).catch(cancel=>{
        this.$tools.showMessage("操作已取消！","info")

      })
    },
    getDataList() {
      this.dialogFormVisible=false
      console.log("查询数据：",this.form)
      axios.get("/fin_param/list/" + this.currentPage + "/" + this.size).then(res => {
        console.log("打卡信息：", res)
        if (res.data.success) {
          this.tableData = res.data.data.records
          this.total = res.data.data.total
          this.pages = res.data.data.pages
        }else{
          this.tableData=[]
          this.total=0
          this.pages=1

        }

      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size = val
      this.getDataList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val
      this.getDataList()
    },
    setDialogVisible(isAdd){
      this.dialogFormVisible=true
      this.isAdd=isAdd
    },
    deleteById(){
      console.log("用户扫描删除")
      this.$tools.showMessageBox("确认删除"+this.multipleSelection.length+"名用户？","批量删除确认","warning").then(confirm=>{
        axios.post("/productInfo/deleteBatch",this.multipleSelection).then(res=>{
          console.log("批量删除结果：",res)
          if(res.data.success){
            this.$tools.showMessage("删除成功！","success")
            this.getDataList()
          }else{
            this.$tools.showMessage("删除失败！","danger")
          }
        })
      }).catch(cancel=>{
        this.$tools.showMessage("操作已取消！","info")
      })
    },
    updateDialogVisible(){
      this.form=this.multipleSelection[0]
      this.setDialogVisible(false)
    },
    updateById(form){
      console.log("用户扫描修改")
      this.$refs[form].validate((valid) => {
        if(valid){
          this.form.updateUserId=this.$store.state.userInfo.id
          axios.post("/fin_param/update", this.form).then(res => {
            if (res.data.success) {
              this.$tools.showMessage("修改成功", "success")
              this.dialogFormVisible=false
              this.getDataList()
              this.form={}
            } else {
              this.$tools.showMessage("修改失败", "danger")

            }
          })
        }else{
          this.$tools.showMessage("请检查您输入的信息...","warning")
        }
      })
    },
    addData(form){
      this.$refs[form].validate((valid) => {
        if(valid){
          this.form.createUserId=this.$store.state.userInfo.id
          axios.post("/fin_param/add", this.form).then(res => {
            if (res.data.success) {
              this.$tools.showMessage("添加成功", "success")
              this.dialogFormVisible=false
              this.getDataList()
            } else {
              this.$tools.showMessage("添加失败", "danger")

            }
          })

        }else{
          this.$tools.showMessage("请检查您输入的信息...","warning")
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
